<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item Sliding - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Item Sliding - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <div class="ion-padding">
          <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
          <ion-button expand="block" id="openItemStart" onclick="openItem('start')">Open Item Start</ion-button>
          <ion-button expand="block" id="openItemEnd" onclick="openItem('end')">Open Item End</ion-button>
          <ion-button expand="block" id="openItemOneSide" onclick="openItemOneSide()"
            >Open Item with only one side</ion-button
          >
        </div>

        <ion-list id="list">
          <div class="nested-div">
            <ion-item-sliding>
              <ion-item>
                <ion-label>
                  <h2>No Options</h2>
                  <p>Should not error or swipe without options</p>
                </ion-label>
              </ion-item>
            </ion-item-sliding>

            <ion-item-sliding id="item100">
              <ion-item href="#">
                <ion-label>
                  <h2>Disabled Buttons</h2>
                  <p>Buttons should not be clickable</p>
                </ion-label>
              </ion-item>

              <ion-item-options side="start">
                <ion-item-option disabled> Disabled </ion-item-option>
              </ion-item-options>
              <ion-item-options side="end">
                <ion-item-option color="danger" disabled>
                  <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>
                <ion-item-option disabled>
                  <ion-icon slot="icon-only" name="star"></ion-icon>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item0">
              <ion-item>
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT side - no icons</h2>
                  <p>Hey do you want to go to the game tonight?</p>
                </ion-label>
              </ion-item>
              <ion-item-options class="sliding-enabled">
                <ion-item-option color="primary">Archive</ion-item-option>
                <ion-item-option color="danger">Delete</ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item1">
              <ion-item detail href="#" class="ion-activated">
                <ion-label class="ion-text-wrap">
                  <h2>LEFT side - no icons</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" class="sliding-enabled">
                <ion-item-option color="primary">Archive</ion-item-option>
                <ion-item-option color="danger">Delete</ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item2">
              <ion-item detail>
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT/LEFT side - icons</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" class="sliding-enabled">
                <ion-item-option color="secondary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Unread
                </ion-item-option>
              </ion-item-options>

              <ion-item-options side="end" class="sliding-enabled">
                <ion-item-option color="primary">
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Archive
                </ion-item-option>
                <ion-item-option color="danger" expandable>
                  <ion-icon slot="start" name="trash"></ion-icon>
                  Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item10">
              <ion-item detail>
                <ion-label class="ion-text-wrap">
                  <h2>RIGHT/LEFT side - many buttons</h2>
                  <p>Use mobile emulator to check</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="start" class="sliding-enabled">
                <ion-item-option color="primary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 1
                </ion-item-option>
                <ion-item-option color="secondary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 2
                </ion-item-option>
                <ion-item-option color="danger" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 3
                </ion-item-option>
                <ion-item-option color="tertiary" expandable>
                  <ion-icon slot="start" name="checkmark"></ion-icon>
                  Btn 4
                </ion-item-option>
              </ion-item-options>

              <ion-item-options side="end" class="sliding-enabled">
                <ion-item-option color="primary" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 5
                </ion-item-option>
                <ion-item-option color="secondary" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 6
                </ion-item-option>
                <ion-item-option color="danger" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 7
                </ion-item-option>
                <ion-item-option color="tertiary" expandable>
                  <ion-icon slot="start" name="mail"></ion-icon>
                  Btn 8
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>
          </div>
        </ion-list>

        <script>
          function closeOpened() {
            var list = document.getElementById('list');
            list.closeSlidingItems();
          }

          function openItem(side) {
            var item = document.getElementById('item2');
            item.open(side);
          }

          function openItemOneSide() {
            var item = document.getElementById('item1');
            item.open();
          }

          function closeSlidingItem(option, item) {
            var itemEle = document.getElementById(item);

            if (itemEle) {
              itemEle.close();
            }
          }
        </script>
      </ion-content>
    </ion-app>
  </body>
</html>
